<template>
  <page-container>
    <div>
      <div style="margin: 10px 0">
        <el-input
          style="width: 200px; margin-right: 10px;"
          placeholder="请输入名称"
          suffix-icon="el-icon-search"
          v-model="nickName"
        ></el-input>
        <el-input
          style="width: 200px; margin-right: 10px;"
          placeholder="请输入邮箱"
          suffix-icon="el-icon-message"
          class="ml-5"
          v-model="email"
        ></el-input>
        <el-input
          style="width: 200px; margin-right: 20px;"
          placeholder="请输入手机号"
          suffix-icon="el-icon-position"
          class="ml-5"
          v-model="phonenumber"
        ></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>
      <div style="margin: 10px 0">
        <el-button type="primary" @click="save">新增<i class="el-icon-circle-plus-outline"></i></el-button>
        <el-popconfirm
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          title="这是一段内容确定删除吗？"
          @confirm="del2"
        >
          <template #reference>
            <el-button class="ml-5 mr-5" type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
          </template>
        </el-popconfirm>

      </div>
      <el-table :data="tableData" header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="nickName" label="姓名" width="140"></el-table-column>
        <el-table-column prop="role" label="角色" width="140">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.role === 'ROLE_ADMIN'">管理员</el-tag>
            <el-tag type="warning" v-if="scope.row.role === 'ROLE_BUSINESS'">商家</el-tag>
            <el-tag type="success" v-if="scope.row.role === 'ROLE_USER'">用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="phonenumber" label="手机" width="180"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
        <el-table-column >
          <template #default="scope">
            <el-button type="success" @click="edit(scope.row)">编辑<i class="ml-5 el-icon-edit"></i></el-button>
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <template #reference>
                <el-button class="ml-5" type="danger">删除<i class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="padding: 10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- Form -->
      <el-dialog title="用户管理" v-model="dialogFormVisible" width="30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.nickName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
              <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="savaFalse">取 消</el-button>
            <el-button type="primary" @click="saveTure">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </page-container>
  
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import request from "@/utils/request2.js"
import { ElMessage } from 'element-plus'

export default {
  name: "User",
  setup() {
    const pageNum = ref(1);
    const pageSize = ref(5);
    const tableData = ref([]);
    const total = ref(0);
    const dialogFormVisible = ref(false);
    const form = reactive({});
    const multipleSelection = ref([]);
    const nickName = ref("");
    const email = ref("");
    const phonenumber = ref("");
    const roles = ref([]);

    const load = () => {
      request.get("/users/page", {
        params: {
          pageNum: pageNum.value,
          pageSize: pageSize.value,
          nickName: nickName.value,
          email: email.value,
          phonenumber: phonenumber.value
        }
      }).then(res => {
        tableData.value = res.records;
        total.value = res.total;
      });

      request.get("/role").then(res => {
        roles.value = res;
      });
    };

    const handleSizeChange = (size) => {
      pageSize.value = size;
      load();
    };

    const handleCurrentChange = (num) => {
      pageNum.value = num;
      load();
    };

    const save = () => {
      dialogFormVisible.value = true;
      form.nickName = "";
      form.role = "";
      form.email = "";
      form.phone = "";
      form.phonenumber = "";
    };

    const saveTure = () => {
      request.post("/users", form).then(res => {
        if (res) {
          ElMessage.success("保存成功");
          dialogFormVisible.value = false;
          load();
        } else {
          ElMessage.error("保存失败");
          dialogFormVisible.value = false;
          load();
        }
      });
    };

    const savaFalse = () => {
      dialogFormVisible.value = false;
      form.nickName = "";
      form.role = "";
      form.email = "";
      form.phone = "";
      form.phonenumber = "";
    };

    const edit = (row) => {
      form.nickName = row.nickName;
      form.role = row.role;
      form.email = row.email;
      form.phone = row.phone;
      form.phonenumber = row.phonenumber;
      dialogFormVisible.value = true;
    };

    const del = (id) => {
      request.delete("/users/" + id).then(res => {
        if (res) {
          ElMessage.success("删除成功");
          load();
        } else {
          ElMessage.error("删除失败");
          load();
        }
      });
    };

    const handleSelectionChange = (val) => {
      multipleSelection.value = val;
    };

    const del2 = () => {
      const ids = multipleSelection.value.map(item => item.id);
      request.post("/users/batch", ids).then(res => {
        if (res) {
          ElMessage.success("批量删除成功");
          load();
        } else {
          ElMessage.error("批量删除失败");
          load();
        }
      });
    };

    const reset = () => {
      nickName.value = "";
      email.value = "";
      phonenumber.value = "";
      load();
    };

    const exp = () => {
      window.open("http://localhost:9999/user/export");
    };

    const handleExcelImportSuccess = () => {
      ElMessage.success("导入成功");
      load();
    };

    onMounted(() => {
      load();
    });

    return {
      pageNum,
      pageSize,
      tableData,
      total,
      dialogFormVisible,
      form,
      multipleSelection,
      nickName,
      email,
      phonenumber,
      roles,
      load,
      handleSizeChange,
      handleCurrentChange,
      save,
      saveTure,
      savaFalse,
      edit,
      del,
      handleSelectionChange,
      del2,
      reset,
      exp,
      handleExcelImportSuccess
    };
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>